import React, { Component } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import { base } from '../router'

// 引入登录界面
import Login from './Login'
import Admin from './Admin'

class App extends Component {

  componentWillMount () {
    // loading 动画 的结束 控制 模块
    let loading = document.getElementById('i-loading')
    if (loading) {
      loading.setAttribute('class', 'i-loading-out')
      setTimeout(() => {
        loading.style.display = 'none'
      }, 1000)
    }
  }


  render() {
    // 判断是否登录
    // const authed = sessionStorage.getItem('isLogin') ? true : false
    // 开发时 取消 登录判断
    const authed = sessionStorage.getItem('isLogin') ? true : true
    // 权限路由，判断用户是否登录，没登录就跳转到登录页
    const AuthRoute = ({component: Component}) => {
      return (
        // 路由重定向
        <Route
          render={(props) => authed
          ? <Component {...props} />
          : <Redirect to={{pathname: `${base}login`, state: {from: props.location}}} />} />
      )
    }
    return (
      // 组件 <Switch> 只渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect> 否则你有几个 <Route> 都会显示
      <Switch>
        {this.props.children}
        {/* 输入 localhost:3000/ 路由指向 localhost:3000/login 去  */}
        <Route exact path={`${base}`} component={Login} />
        {/* exact=false 的时候 path 等于 /login /login/me 都能匹配  但是 exact=true 的时候 只匹配 path 等于 /login */}
        <Route exact path={`${base}login`} component={Login} />
        <AuthRoute path={`${base}admin`} component={Admin} />
      </Switch>
    )
  }
}

export default App
